<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./gwc.css">
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./js/utils.js"></script>
</head>
<body>
    <div class="page">
        <div class="head">
        <div class="common">
           <ul class="head-nav1">
               <li><a href="./xg.html" style="padding:0 7px ;">修改个人信息</a></li>
               <li><a href="">网页无障碍</a></li>
           </ul>
           <ul class="head-nav2">
               <li><a href="list.html">淘宝网首页</a></li>
               <li><div class="site-nav-menu-hd"><a href=""  style="padding: 0 6px;">我的淘宝<span class="iconfont">&#xe79a;</span></a></div>
                <div class="site-nav-menu-bd">
                    <ol><li><a href="">已买到的宝贝</a></li>
                    <li><a href="">我的足迹</a></li>
                    </ol>
                </div>
               </li>
               <li><a href=""><i class="h"><span class="iconfont">&#xe70c;</span></i> 购物车</a></li>
               <li><div class="site-nav-menu-hd"><a href=""><span class="iconfont">&#xe8c6;</span>收藏夹<span class="iconfont">&#xe79a;</span></a> </div>
                <div class="site-nav-menu-bd">
                <ol>
                 <li><a href="">收藏的宝贝</a></li>
                 <li><a href="">收藏的店铺</a></li>
               </ol></div>
                </li>
               <li><a href="">商品分类</a></li> 
               <li><a href="">免费开店</a></li><li><span class="l">|</span></li>
               <li><div class="site-nav-menu-hd"><a href="">千牛卖家中心<span class="iconfont">&#xe79a;</span></a></div>
                <div class="site-nav-menu-bd"><ol>
                   <li><a href="">开店入驻</a></li>
                   <li><a href="">已卖出的宝贝</a></li>
                   <li><a href="">出售中的宝贝</a></li>
                   <li><a href="">卖家服务市场</a></li>
                   <li><a href="">卖家培训中心</a></li>
                   <li><a href="">体检中心</a></li>
                   <li><a href="">电商学习中心</a></li>
                 </ol></div> 
               </li>
               <li><div class="site-nav-menu-hd"><a href="">联系客服<span class="iconfont">&#xe79a;</span></a></div>
                <div class="site-nav-menu-bd"><ol>
                 <li><a href="">消费者客服</a></li>
                 <li><a href="">卖家客服</a></li>
               </ol></div>
               </li>
           </ul>
        </div>
        </div>
        <div class="center">
            <div class="common">
                
                <div class="search">
                    <form action="">
                        <tr>
                            <td> <input type="search"placeholder="请输入搜索文字" class="input1"> </td>
                            <td> <input type="submit"value="搜索" class="input2"> </td>
                         </tr>
                    </form>
                    <ul>
                        <span class="iconfont">&#xe79a;</span>
                        <li><a href="" style="  color: #000!important;"> 宝贝</a>
                            <ol>
                                <li><a href="">天猫</a></li>
                                <li><a href="">店铺</a></li>
                            </ol>
                        </li> 
                    </ul>
                   </div>  
                <div class="logo">
                   <a href="list.html"><img src="./img/taobao.png" alt=""></a> 
                </div> 
            </div>

            

        </div>
    <div class="main">
     <div class="common">
        <div class="maintop">
            <span class="span1">购物车</span>
            <div class=" topright">
                已选商品（不含运费）<span class="totalPrice">000</span>
            <button>结算</button>  
            </div>
          
            
  
        </div>
       <div class="cart">
        <table>
         <thead>
            <tr class="try">
              <th><input type="checkbox" name="selectAll">全选</th>
              <th>商品图片</th>
              <th class="title" width="100">商品名称</th>
              <th>商品单价</th>
              <th>商品数量</th>
              <th>商品小计</th>
              <th>商品操作</th>
          </tr>
         
         </thead>
         <tbody>
             
         </tbody>
         <tfoot>
             <tr>
              <td><input type="checkbox" name="selectAll">全选</td>
              <td class="removeSelected">删除选中的商品</td>

              <!-- <td>总价：￥<span class="totalPrice">000</span></td> -->
              <td>总数量：<span class="totalNum"></span></td>
              <td class="clear">清空购物车</td>
              <!-- <td></td> -->
              <td><button>结算</button></td>
          </tr>
         </tfoot>
        </table>
       </div>
       </div>
      </div>
    </div>
    
    
</body>
</html>
<!--  /*        $('ul>li').hover(function(){
        $(this).find('ol').stop().slideDown().parent().siblings().find('ol').stop().slideUp()
}, function() {
    $(this).find('ol').stop().slideUp()
}) */ -->
<script src="./js/utils.js"></script>
<script>
// 判断用户是否登录
var username = getCookie('username')
if(!username) {
    alert('请先登录')
    localStorage.setItem('url', location.href)
    location.href = 'dl.html'
}
// 获取div
var div = document.querySelector('.cart');
var tbody = document.querySelector('.cart tbody');
// 获取购物车数据，渲染到页面中即可
sendAjax({
    url: 'http://localhost:8888/cart/list',
    data: {
        id: getCookie('userId')
    },
    headers: {
        authorization: localStorage.getItem('token')
    },
    success: res => {
        console.log(res);
        // 判断用户数购物车获取都的数据是否为空
        if(res.cart.length) {
            // 有数据 - 渲染
            var str = ''
            res.cart.forEach(v => {
                // 所有的单选，我们需要根据数据库中的选中状态来设置复选框的选中状态
                str += `
                    <tr>
                        <td data-id="${v.goods_id}" class='td1'><input type="checkbox" name="selectOne" ${v.is_select?'checked':''}></td>
                        <td><img src="${v.img_small_logo}" alt=""></td>
                        <td class="title" width="100">${v.title.slice(0,10)}</td>
                        <td class='td4'>${v.price}</td>
                        <td>
                            <input type="button" value="-" class="reduce">
                            <input type="number" data-stock="${v.goods_number}" name="number"  value="${v.cart_number}">
                            <input type="button" value="+" class="add">
                        </td>
                        <td class="subtotal">${v.price * v.cart_number}</td>
                        <td>删除</td>
                    </tr>
                `
            })
            tbody.innerHTML = str
            selectAll()
            // 单选功能
            selectOne()
            // 数量加和减
            addAndReduce()
            // 计算小计的功能
            subtotal()
            // 计算总数量和总价格
            total()
            // 删除单个商品
            remove()
            // 删除选中商品的功能
            removeSelected()
            // 清空购物车的功能
            clear()
        } else {
            // 购物车是空的，去挑选商品吧
            div.innerHTML = '购物车是空的，去挑选商品吧！<a href="list.html">商品页面</a>'
        }
        
    }
})
// 清空购物车的功能
function clear() {
    // 获取清空按钮
    var btn = document.querySelector('.clear');
    btn.onclick = function() {
        // 询问用户
        if(!confirm('你确定要删除吗？')) return false 
        // 将tbody清空
        document.querySelector('tbody').innerHTML = ''
        
        // 发送请求
        sendAjax({
            url: 'http://localhost:8888/cart/clear',
            headers: {
                authorization: localStorage.getItem('token')
            },
            data: {
                id: getCookie('userId')
            },
            success: res => {
                console.log(res);
                div.innerHTML = '购物车是空的，去挑选商品吧！<a href="list.html">商品页面</a>'
            }
        })
    }
}
// 删除选中商品的功能
function removeSelected() {
    // 获取删除选中的按钮 - 绑定事件
    document.querySelector('.removeSelected').onclick = function() {
        // 询问用户
        if(!confirm('你确定要删除吗？')) return
        // 删除
        // 页面效果
        // 从tbody中将没有选中的tr保留下来即可
        var trs = document.querySelectorAll('tbody>tr');
        // console.log(trs);
        // 将tbody内容清空
        var tbody = document.querySelector('tbody');
        tbody.innerHTML = ''
        // 遍历找出哪个是未选中
        for(var i=0; i<trs.length; i++) {
            if(!trs[i].firstElementChild.firstElementChild.checked) {
                // 找到未选中的tr - 将tr再次放入tbody中
                tbody.appendChild(trs[i])
            }
        }
        // 购物车数据删除
        sendAjax({
            url: 'http://localhost:8888/cart/remove/select',
            headers: {
                authorization: localStorage.getItem('token')
            },
            data: {
                id: getCookie('userId')
            },
            success: res => {
                console.log(res);
                total()
            }
        })
    }
}
// 删除单个商品的功能
function remove() {
    // 获取所有删除按钮
    var removeBtns = document.querySelectorAll('tbody td:last-child');
    // console.log(removeBtns);
    // 循环绑定
    for(var i=0; i<removeBtns.length; i++) {
        removeBtns[i].onclick = function() {
            // 碰到退出登录或删除数据的时候一定要询问用户是否继续
            if(!confirm('你确定要删除吗？')) return
            // 将当前商品所在tr从tbody中删除
            this.parentElement.parentElement.removeChild(this.parentElement)
            // 发送ajax从数据库中删除当前商品
            // 获取当前商品id
            var id = this.parentElement.firstElementChild.getAttribute('data-id')
            sendAjax({
                url: 'http://localhost:8888/cart/remove',
                headers: {
                    authorization: localStorage.getItem('token')
                },
                data: {
                    id: getCookie('userId'),
                    goodsId: id
                },
                success: res => {
                    console.log(res);
                    total()
                    // 判断购物车数据是否存在
                    if(document.querySelector('tbody').children.length === 0) {
                        div.innerHTML = '购物车是空的，去挑选商品吧！<a href="list.html">商品页面</a>'
                    }
                }
            })
        }
    }
}
// 计算总数量和总价格
function total() {
    // 获取所有的单选
    var selectOne = document.querySelectorAll('[name="selectOne"]');
    // 因为我们要找到所有已经选中的商品
    // 从中筛选出所有已经选中的 - filter
    // console.log(selectOne);
    // 将伪数组转成数组、
    var arr = Array.prototype.slice.call(selectOne)
    var brr = arr.filter(item => item.checked)
    // console.log(brr);
    // 遍历所有的brr中的复选框，找到对应的小计累加
    var totalPrice = 0 // 定义总价格变量
    var totalNum = 0 // 定义总数量变量
    brr.forEach(item => {
        // 根据当前复选框找到对应的小计
        var subtotal = +item.parentElement.parentElement.lastElementChild.previousElementSibling.innerText
        // 根据当前复选框找到对应的数量
        var num = +item.parentElement.parentElement.children[4].children[1].value
        totalNum += num
        // 将所有遍历出来的小计累加
        totalPrice += subtotal
    })
    // 将结果放在总价格中
    document.querySelector('.totalPrice').innerText = totalPrice.toFixed(2)
    document.querySelector('.totalNum').innerText = totalNum
}
// 计算小计
function subtotal() {
    // 获取所有数量，找到数量对应的单价，进行计算，放在小计td中
    // 获取所有数量文本框
    var numInput = document.querySelectorAll('[name="number"]');
    // 循环计算
    for(var i=0; i<numInput.length; i++ ) {
        // 商品数量
        var num = numInput[i].value
        // 找对应的单价
        var price = numInput[i].parentElement.previousElementSibling.innerText
        // console.log(num, price);
        var sub = num * price
        // 放在对应的小计td中
        numInput[i].parentElement.nextElementSibling.innerText = sub.toFixed(2)
    }
}
// 数量加和减
function addAndReduce() {
    // 点击每个加
    // 获取所有加的按钮
    var addBtns = document.querySelectorAll('.add');
    // console.log(addBtns);
    for(var i=0; i<addBtns.length; i++) {
        addBtns[i].onclick = function() {
            // 点击+，就需要让当前商品的数量 + 1
            // 先获取当前+对应的数量
            var num = +this.previousElementSibling.value // this的上一个兄弟标签
            // console.log(num);
            // 让数量自增
            num++
            // 数量不能无止尽的增加，因为每个商品都是有库存的
            // 获取当前商品的库存
            var stock = +this.previousElementSibling.getAttribute('data-stock')
            // console.log(stock);
            // 对num进行限制
            if(num > stock) {
                num = stock
                return
            }
            // console.log(num);
            // 将自增后的数量放在上一个兄弟标签中
            this.previousElementSibling.value = num
            // 只是页面中效果可以增加了，但是每次刷新数量无法固定，又会还原成最初始的数量
            // 发送ajax修改当前商品的数量
            // 获取当前点击的商品的id
            var id = this.parentElement.parentElement.firstElementChild.getAttribute('data-id')
            sendAjax({
                url: 'http://localhost:8888/cart/number',
                method: 'post',
                headers: {
                    authorization: localStorage.getItem('token')
                },
                data: {
                    id: getCookie('userId'),
                    goodsId: id,
                    number: num
                },
                success: res => {
                    console.log(res);
                    subtotal()
                    total()
                }
            })
        }
    }

    // 点击每个减
    // 获取所有减的按钮
    var reduceBtns = document.querySelectorAll('.reduce');
    // console.log(reduceBtns);
    // 循环绑定事件
    for(var i=0; i<reduceBtns.length; i++) {
        reduceBtns[i].onclick = function() {
            // 获取当前商品的数量
            var num = +this.nextElementSibling.value
            // 数量自减
            num--
            // 将数量进行限制
            if(num < 1) {
                num = 1
                return
            }
            // 将数量放在文本框中
            this.nextElementSibling.value = num
            // 发送请求修改商品数量 - 让数量修改后再次刷新也能固定好
            var id = this.parentElement.parentElement.firstElementChild.getAttribute('data-id')
            sendAjax({
                url: 'http://localhost:8888/cart/number',
                method: 'post',
                headers: {
                    authorization: localStorage.getItem('token')
                },
                data: {
                    id: getCookie('userId'),
                    goodsId: id,
                    number: num
                },
                success: res => {
                    console.log(res);
                    subtotal()
                    total()
                }
            })
        }
    }
    // 手动修改文本框中数量
    var numInput = document.querySelectorAll('[name="number"]');
    // 循环绑定事件
    for(var i=0; i<numInput.length; i++) {
        numInput[i].oninput = function() {
            // 每次正在修改数量触发的事件
            // 对修改的数量做大小限制
            // 获取库存
            var stock = +this.getAttribute('data-stock')
            if(+this.value > stock) {
                this.value = stock
            }
            if(+this.value < 1) {
                this.value = 1
            }
        }
        // 当失去焦点的时候，数量就已经修改好了页面效果好了，需要发送请求修改数据中的数量
        numInput[i].onblur = function() {
            // 获取当前数量
            var num = +this.value
            var id = this.parentElement.parentElement.firstElementChild.getAttribute('data-id')
            sendAjax({
                url: 'http://localhost:8888/cart/number',
                method: 'post',
                headers: {
                    authorization: localStorage.getItem('token')
                },
                data: {
                    id: getCookie('userId'),
                    goodsId: id,
                    number: num
                },
                success: res => {
                    console.log(res);
                    subtotal()
                    total()
                }
            })
        }
    }
}
// 单选功能
function selectOne() {
    // 当所有的单选选中后，让所有的全选保持选中状态，如果不是所有的单选都选中，让两个全选保持取消选中
    // 给所有的单选绑定单击事件
    var selectOneBtn = document.querySelectorAll('[name="selectOne"]');
    // 获取所有全选复选框
    var selectAllBtn = document.querySelectorAll('[name="selectAll"]');
    // 循环绑定
    for(var i=0; i<selectOneBtn.length; i++) {
        selectOneBtn[i].onclick = function() {
            // 判断是否所有的单选都是选中
            // 将selectOneBtn这个伪数组转成数组
            var arr = Array.prototype.slice.call(selectOneBtn)
            // 调用数组的every方法来进行判断
            var bool = arr.every(item => item.checked)
            // 根据bool设置所有的全选
            for(var j=0; j<selectAllBtn.length; j++) {
                selectAllBtn[j].checked = bool
            }
            // 发送ajax改变每个单选的选中状态的数据
            // 获取当前点击的这个单选所在商品的id - 在渲染页面的时候，给当前复选框的父标签td上添加了一个属性：data-id，对应的值，就是当前商品的id
            var id = this.parentElement.getAttribute('data-id')
            sendAjax({
                url: 'http://localhost:8888/cart/select',
                method: 'post',
                headers: {
                    authorization: localStorage.getItem('token')
                },
                data: {
                    id: getCookie('userId'),
                    goodsId: id
                },
                success: res => {
                    console.log(res);
                    total()
                }
            })
        }
    }
}
// 全选功能
function selectAll() {
    // 需要给两个全选的复选框绑定单击事件，根据自身的选中状态，设置所有单选的选中状态
    // 获取两个全选的复选框
    var selectAllBtn = document.querySelectorAll('[name="selectAll"]');
    // 获取所有的单选复选框
    var selectOneBtn = document.querySelectorAll('[name="selectOne"]');
    // console.log(selectAllBtn);

    // 判断是否所有的单选都是选中状态，如果是，就设置两个全选为选中状态，否则就设置两个全选为取消状态
    // 将所有的单选这个伪数组，转成数组，然后使用every方法进行判断
    var arr = Array.prototype.slice.call(selectOneBtn)
    var bool = arr.every(item => {
        return item.checked
    })
    for(var j=0; j<selectAllBtn.length; j++) {
        selectAllBtn[j].checked = bool
    }
    for(var i=0; i<selectAllBtn.length; i++) {
        selectAllBtn[i].onclick = function() {
            var checkedStatus = this.checked
            for(var j=0; j<selectOneBtn.length; j++) {
                selectOneBtn[j].checked = checkedStatus
            }
            for(var j=0; j<selectAllBtn.length; j++) {
                selectAllBtn[j].checked = checkedStatus
            }
            sendAjax({
                url: 'http://localhost:8888/cart/select/all',
                method: 'post',
                headers: {
                    authorization: localStorage.getItem('token')
                },
                data: {
                    id: getCookie('userId'),
                    type: Number(checkedStatus) // true是1，false是0
                },
                success: res => {
                    console.log(res);
                    total()
                }
            })
        }
    }
}



</script>
